<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
		  <!-- <view slot="bottom">
		    <template>
		      <view class="input-product">
		        <u-search placeholder="搜索" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
		      </view>
		    </template>
		  </view> -->
		</hx-navbar>
		<view class="search-box flex">
			<view class="input-product m-b-40">
			  <u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="searchData.keywords" @search="onSearchChange" color="#fff" :showAction="false"></u-search>
			</view>
		</view>
		
		
		<u-loading-page :loading="pageLoading"></u-loading-page>

		<scroll-view class="" scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
			@refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
			:style="{height: `${screenHeight}px`}">

			<u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />

			<view class="">
				<view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
					<view>
						<view class="name">{{item.label}}</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 侧边栏 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
		    <view class="pop-view">
				<view>
					<view class="flex item-view">
						<view class="p-r-10">
							显示停用
						</view>
						<u-switch v-model="value" size="20"></u-switch>
					</view>
				</view>
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import _ from 'lodash'

	import {
    listOptionsRelationShopHeader
	} from '@/apis/bill/shop'

	export default {
		data() {
			return {
				config: {
				  title: "选择门店",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				sideObj: {},
				value: '',
				
				
				
				searchData: {},
				screenHeight: 0,
				pageLoading: true,
				triggered: false,
				listData: [],
				pageInfo: {
					current: 1, // 当前页
					size: 10, // 每页数据条数
					sort: '', // 排序字段
					order: 'desc', // 排序方向
					total: 0 // 总数居量
				}
			}
		},
		onLoad() {
			this.initData()
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			this.screenHeight = sysInfo.windowHeight
		},
		methods: {
			// 打开侧边栏
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
			close() {
				this.show = false
			},
			open() {
				
			},
			// 重置
			onReset() {
				this.sideObj = {
					category: '',
					shop: ''
				}
			},
			// 搜索
			onSearch() {
				this.show = false
				this.onReset()
				this.onSearchChange()
			},
			initData() {
				this.listPage()
			},
			listPage() {
				const params = {
					page: this.pageInfo,
					data: this.searchData
				}
				uni.showLoading({
					title: "加载中"
				})
        listOptionsRelationShopHeader(params).then(res => {
					if (!res.data.flag) return
					const records = res.data.data || []
          this.listData.push(...records)
				}).finally(_ => {
					this.triggered = false
					this.pageLoading = false
					uni.hideLoading()
				})
			},
			onSearchChange() {
				this.handlerSearch()
			},
			handlerSearch: _.debounce(function() {
				this.listData = []
				this.listPage()
			}, 200),
			itemClick(row) {
				uni.$emit("on-selected-shop", row)
				this.$Router.back()
			},
			onRefresherrefresh() {
				this.triggered = true
				this.listData = []
				this.listPage()
			},
			onScrolltolower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding-top: 30rpx;
		justify-content: center;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
	.input-product {
	  width: 95%;
	  border-radius: 50upx;
	  height: 70upx;
	  line-height: 70upx;
	  color: #fff;
	  display: flex;
	  background: rgba(248, 248, 248, 0.34);
	}
	.item {
		background: #fff;
		padding: 24rpx;
		
		.name {
			font-size: 30rpx;
			color: #333;
		}
	}
	.pop-view {
		padding-top: 88rpx;
		.item-view {
			height: 88rpx;
			align-items: center;
			border-bottom: 1rpx solid #ddd;
			padding: 0 10rpx;
		}
	}
</style>
